<template>
    <div>
        <dao-hang></dao-hang>
        <div style="display: flex;" class="imagehead">
            <div style="flex: 1%;"></div>
            <!--                中央布局内-->

            <div class="grod"
                 style="background-color: white;width: 1730px; margin-right:20px;flex:12;border-radius: 4px;">

                <div style="display: flex;">
                    <div style="flex:2;margin-top: 80px;margin-left: 180px;display: flex">
                        <el-carousel :interval="4000" type="card" height="300px" style="width: 800px;">
                            <el-carousel-item v-for="item in cordee" :key="item.index">
                                <router-link :to="{path:'/mybolgs',query:{id:item.id}}">
                                    <el-image style="width: 100%;height: 100%;" :src="item.img"></el-image>
                                </router-link>


                            </el-carousel-item>
                        </el-carousel>
                    </div>


                    <div style="flex:1;margin-left: 50px;margin-right: 150px;margin-top: 120px;">
                        <el-card class="box-card">
                            <div class="text item" style="font-size: 18px; text-align: center">
                                <div>欢迎来到多人互动博客</div>
                                <br>
                                <div>功能需要自己发掘！</div>
                                <br>
                                <div>温馨提示 : 请放松！</div>
                                <div style="margin-top: 20px;">
                                    <el-button v-if="token!=null" @click="$router.push('/creaArticle')" type="success">
                                        开始我的新博客
                                    </el-button>
                                    <el-button v-if="token==null" @click="$router.push('/rigest')" type="success">账号注册
                                    </el-button>
                                    <el-button v-if="token==null" @click="$router.push('/login')" type="success">用户登录
                                    </el-button>
                                </div>

                            </div>
                        </el-card>
                    </div>
                </div>


                <!--                中央布局内的他们正在写博客内容  页面传参-->
                <div style="flex: none;margin-left: 180px;margin-right: 150px;margin-top: 100px;">

                    <div class="imageTow" style="flex: none;margin-top: 150px;">
                        <el-divider>
                            <el-card style="border-radius: 60px;">
                                <h3>他们正在写博客</h3>
                            </el-card>
                        </el-divider>
                    </div>

                    <!--                    <div v-for="(item,index) in cordee" :key="index" style="width: 350px;margin-left: 50px;">-->

                    <!--                    </div>-->
                    <div style="margin-left: 30px;">
                        <input type="text" v-model="titleto" placeholder="请输入文章标题" style="line-height: 20px;">
                        <el-button style="line-height: 10px;" type="success" @click="LikeConten()">查询</el-button>
                    </div>
                    <el-row>
                        <el-col :span="9"
                                v-for="(item, index) in cordee.slice((currentPage-1)*PageSize,currentPage*PageSize)"
                                :key="index" :offset="index > 0 ? 3 : 0"
                                style="width: 390px;margin-left: 20px;">
                            <el-card style="margin-top: 50px;padding: 0px;">
                                <span style="font-size: 30px;">{{item.cotitle}}</span>
                                <el-button style="float:right;font-size: 15px;color:#409EFF;">作者：{{item.name}}
                                </el-button>
                                <div style="margin-top: 10px;">
                                    <el-image style="width:350px;height: 250px;overflow: auto;padding: 0px;"
                                              :src="item.img"></el-image>
                                </div>


                                <div>
                                    <router-link :to="{path:'/mybolgs',query:{id:item.id}}">
                                        <el-button style="color: #409EFF">阅品文章</el-button>
                                    </router-link>
                                    <span style="margin-left: 50px;">{{item.data}}</span>

                                </div>

                            </el-card>
                        </el-col>
                    </el-row>


                    <el-pagination @size-change="handleSizeChange"
                                   @current-change="handleCurrentChange"
                                   :current-page="currentPage"
                                   :page-sizes="pageSizes"
                                   :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
                                   :total="totalCount"
                                   style="margin-left: 400px;margin-top: 10px;">
                    </el-pagination>


                </div>


                <div style="flex: none;margin-top: 150px;margin-left: 150px;margin-right: 150px;">
                    <el-divider>
                        <el-card style="border-radius: 10px;width: 150px;text-align: center">
                            <el-badge value="NEW" class="item">
                                <h3 style="">相册广场</h3>
                            </el-badge>
                        </el-card>
                    </el-divider>
                </div>

                <div style="margin-left: 200px;">
                    <input type="text" v-model="imatitle" placeholder="请输入图片标题" style="line-height: 20px;">
                    <el-button style="line-height: 10px;" type="success" @click="ImaLike()">查询</el-button>
                </div>
                <div style="flex: none;margin-left: 175px;margin-right: 100px;">

                    <!--                    <div v-for="(item,index) in cordee" :key="index" style="width: 350px;margin-left: 50px;">-->

                    <!--                    </div>-->

                    <el-row>
                        <el-col :span="9"
                                v-for="(item, index) in phote.slice((imacurrentPage-1)*imaPageSize,imacurrentPage*imaPageSize)"
                                :key="index" :offset="index > 0 ? 3 : 0"
                                style="width: 390px;margin-left: 20px;">
                            <el-card style="margin-top: 50px;padding: 0px;">
                                <span style="font-size: 30px;">{{item.title}}</span>
                                <el-button style="float:right;font-size: 15px;color:#409EFF;">作者：{{item.name}}
                                </el-button>


                                <div class="demo-image__preview" style="margin-top: 10px;">
                                    <el-image
                                            style="width:350px;height: 250px;overflow: auto;padding: 0px;"
                                            :src="item.image"
                                            :preview-src-list="srcList"
                                            @click="ShowImato(item.id)"
                                    >
                                    </el-image>
                                </div>


                                <div>
                                    <span style="color: #409EFF">请点击封面噢！</span>
                                    <span style="margin-left: 50px;">{{item.date}}</span>

                                </div>

                            </el-card>
                        </el-col>
                    </el-row>


                </div>
                <el-pagination @size-change="imahandleSizeChange"
                               @current-change="imahandleCurrentChange"
                               :current-page="imacurrentPage"
                               :page-sizes="imapageSizes"
                               :page-size="imaPageSize" layout="total, sizes, prev, pager, next, jumper"
                               :total="toCount"
                               style="margin-left: 580px;margin-top: 10px;margin-bottom: 20px">
                </el-pagination>


            </div>


            <div style="flex: 1"></div>


        </div>
    </div>

</template>


<script>

    export default {
        name: "index",


        data() {
            return {
                activeName: '1',
                titleto: '',
                src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
                token: localStorage.getItem('TOKEN'),
                userInfo: {},
                imatitle: '',
                Showima: [],
                showBig: [],
                phote: [],
                srcList: [],
                cordee: [],
                // 默认显示第几页
                currentPage: 1,
                // 总条数x
                totalCount: 1,
                // 个数选择器
                pageSizes: [1, 2, 3, 6],
                // 默认每页显示的条数
                PageSize: 6,
                //相册的总条
                toCount: 1,
                imaPageSize: 6,
                imapageSizes: [1, 2, 3, 6],
                imacurrentPage: 1,
                tophone: [],
            }
        },
        created() {

            // this.ShowImato();
            // this.$axios.post("/api/MyIma/ShowIma").then(res => {
            //     console.log(res);
            //     this.Showima = res.data.data;
            //
            // })

            // this.$axios.post("/api/phote/showpote").then(res => {
            //     console.log(res);
            //     this.phote = res.data.data;
            //     this.toCount = this.phote.length;
            // })


            //分页
            //
            // this.$axios.post("/api/conten/showblog").then(res => {
            //     console.log(res);
            //     this.cordee = res.data.data;
            //     this.totalCount = this.cordee.length;
            //     console.log(this.totalCount);
            // });

            this.$axios.get("/api/user/main/info", {headers: {TOKEN: this.token}}).then(res => {
                console.log(res);
                this.userInfo = res.data.data;

            })

            //路径传参模糊
            this.Showto();
            this.Showimage();

        }
        ,
        methods: {

            //显示所有照片
            ShowImato(into) {
                this.tophone.imaid=into;
                this.srcList=[];
                    this.$axios.post("/api/MyIma/ShowIma",{imaid:this.tophone.imaid}).then(res => {
                        console.log(res)
                        this.tophone = res.data.data;
                        this.tophone.forEach((item) => {
                            console.log(item)
                            this.srcList.push(item.imagecode);
                        });
                    })




            },
            //相册查询
            ImaLike() {
                this.$axios.post("/api/phote/likename", {title: this.imatitle}).then(res => {
                    console.log(res)
                    this.phote = res.data.data;
                    if (res.data.status === 1) {
                        this.$message.success(res.data.msg);

                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
            },
            //文章模糊查询
            LikeConten() {
                this.$axios.post("/api/conten/likeblog", {cotitle: this.titleto}).then(res => {
                    console.log(res)
                    this.cordee = res.data.data;
                    if (res.data.status === 1) {
                        this.$message.success(res.data.msg);

                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
            },

            handleSizeChange(val) {
                // 改变每页显示的条数
                this.PageSize = val
                // 在改变每页显示的条数时，要将页码显示到第一页
                this.currentPage = 1
            },
            // 显示第几页
            handleCurrentChange(val) {
                // 改变默认的页数
                this.currentPage = val
            },
            imahandleSizeChange(val) {
                // 改变每页显示的条数
                this.imaPageSize = val
                // 在改变每页显示的条数时，要将页码显示到第一页
                this.imacurrentPage = 1
            },
            // 显示第几页
            imahandleCurrentChange(val) {
                // 改变默认的页数
                this.imacurrentPage = val
            },
            Showimage() {
                this.$axios.post("/api/phote/showpote").then(res => {
                    this.phote = res.data.data;
                    this.toCount = this.phote.length;
                })
            },

            Showto() {

                this.$axios.post("/api/conten/showblog").then(res => {
                    this.cordee = res.data.data;
                    this.totalCount = this.cordee.length;

                    console.log(this.totalCount);
                });
            },
            // //大图展示照片
            // Showtoima() {
            //     this.$axios.post("/api/MyIma/ShowIma").then(res => {
            //         this.showBig = res.data.data;
            //         this.showBig.forEach((item) => {
            //             this.srcList.push(item.imagecode);
            //         });
            //     })
            // }

        }
    }
</script>


<style scoped>
    .el-carousel__item h3 {
        color: #67c23a;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }

    .imagehead {

    }

    .grod {
        background-image: url("https://img0.baidu.com/it/u=3037405120,4038196290&fm=26&fmt=auto&gp=0.jpg");
        background-size: 100%;
    }

    .imageTow {
        background-image: url("https://img2.baidu.com/it/u=3128284803,985191077&fm=26&fmt=auto&gp=0.jpg");
        background-size: 100%;
    }

    .imageOne {
        background-image: url("https://img0.baidu.com/it/u=3328919525,2746783217&fm=26&fmt=auto&gp=0.jpg");
        background-size: 100%;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: white;
    }


    .infinite-list::-webkit-scrollbar {
        display: none;
    }


</style>
